<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险评估管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
{#    <link rel="stylesheet" type="text/css" href="/static/css/admin.css" />#}
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        /* 添加CSS样式来调整下拉框 */
        .layui-table-cell { height: auto !important; overflow: visible !important; }
        .layui-table-view .layui-table { overflow: visible; }
        .layui-table-view .layui-table[lay-filter="riskAssessmentTable"] .layui-table-cell { overflow: visible; }
        .layui-form-select dl { max-height: 200px !important; position: absolute; z-index: 1000; width: 100%; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
        /* 自动折行样式 */
        .auto-wrap {
            white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
            word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
            max-width: 100%; /* 确保内容不会溢出单元格 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="riskAssessmentTable" lay-filter="riskAssessmentTable"></table>
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 获取下拉框选项
            var safeAffectOptions = [];
            var economyAffectOptions = [];
            var operatorAffectOptions = [];
            var privateAffectOptions = [];

            Promise.all([
                fetch('/getRiskAssessmentPara?type=安全影响').then(response => response.json()),
                fetch('/getRiskAssessmentPara?type=经济影响').then(response => response.json()),
                fetch('/getRiskAssessmentPara?type=操作影响').then(response => response.json()),
                fetch('/getRiskAssessmentPara?type=隐私影响').then(response => response.json())
            ]).then(data => {
                safeAffectOptions = data[0];
                economyAffectOptions = data[1];
                operatorAffectOptions = data[2];
                privateAffectOptions = data[3];
                renderTable();
            });

            function renderTable() {
                // 计算表格的高度
                var windowHeight = window.innerHeight;
                {#var headerHeight = document.querySelector('.header-container').offsetHeight;#}
                var tableHeight = windowHeight - 30; // 减去其他元素的高度和一些边距
                console.info('tableHeight:',tableHeight);
                console.info('windowHeight:',windowHeight);

                table.render({
                    elem: '#riskAssessmentTable',
                    url: '/getRiskAssessmentEcu',
                    height: tableHeight,
                    page: true,
                    limit: 20,
                    limits: [20, 50, 100, 500, 1000],
                    cols: [[
                        {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                        {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                        {field: 'item', title: 'ITEM', width: 110, align: 'center'},
                        {field: 'ecu', title: 'ECU', width: 70, align: 'center'},
                        {field: 'ecu_feature', title: '特性', width: 120, align: 'center'},
                        {field: 'asset_code', title: '资产编码', width: 200, align: 'center'},
                        {field: 'security_attr', title: '安全属性', width: 110, align: 'center'},

                        {field: 'thread_type', title: '威胁类型', width: 110, align: 'center'},
                        {field: 'thread_scenario_number', title: '威胁场景编号', width: 210, align: 'center'},
                        {field: 'thread_scenario', title: '威胁场景', width: 300, align: 'left', templet: function(d) {
                            return '<div class="auto-wrap">' + d.thread_scenario + '</div>';
                        }},

                        {field: 'damage_scenario_desc', title: '损害场景描述', width: 300, align: 'left', edit: 'textarea', templet: function(d) {
                            return '<div class="auto-wrap">' + d.damage_scenario_desc + '</div>';
                        }, editOptions: {
                            type: 'textarea',
                            style: 'width: 100%; height: 100px;' // 设置textarea的样式
                        }},
                        {field: 'risk_code', title: '风险编码', width: 210, align: 'center'},
                        {field: 'safe_affect_id', title: '安全影响', width: 150, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="safeAffectIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < safeAffectOptions.length; i++) {
                                html += '<option value="' + safeAffectOptions[i].id + '" ' + (safeAffectOptions[i].id == d.safe_affect_id ? 'selected' : '') + '>' + safeAffectOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'economy_affect_id', title: '经济影响', width: 150, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="economyAffectIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < economyAffectOptions.length; i++) {
                                html += '<option value="' + economyAffectOptions[i].id + '" ' + (economyAffectOptions[i].id == d.economy_affect_id ? 'selected' : '') + '>' + economyAffectOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'operator_affect_id', title: '操作影响', width: 150, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="operatorAffectIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < operatorAffectOptions.length; i++) {
                                html += '<option value="' + operatorAffectOptions[i].id + '" ' + (operatorAffectOptions[i].id == d.operator_affect_id ? 'selected' : '') + '>' + operatorAffectOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'private_affect_id', title: '隐私影响', width: 150, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="privateAffectIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < privateAffectOptions.length; i++) {
                                html += '<option value="' + privateAffectOptions[i].id + '" ' + (privateAffectOptions[i].id == d.private_affect_id ? 'selected' : '') + '>' + privateAffectOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'affect_value', title: '影响值', width: 100, align: 'center'},
                        {field: 'affect_level', title: '影响等级', width: 120, align: 'center'},
                        {field: 'attack_level', title: '攻击等级', width: 120, align: 'center'},
                        {field: 'risk_level', title: '风险等级', width: 130, align: 'center', sort: true},
                        {#{field: 'risk_treatment_strategy', title: '风险处置策略', width: 130, align: 'center'},#}
                        {#{field: 'risk_treatment_desc', title: '风险处置描述', width: 130, align: 'center'}#}
                    ]],
                    done: function (res, curr, count) {
                        console.log('表格渲染完成');
                        // 手动渲染下拉框
                        form.render('select');
                    }
                });
            }

            // 表格编辑事件
            table.on('edit(riskAssessmentTable)', function (obj) {
                var value = obj.value // 得到修改后的值
                    , data = obj.data // 得到所在行所有键值
                    , field = obj.field; // 得到字段

                // 发送更新请求
                fetch('/updateRiskAssessmentEcu', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: data.id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 安全影响下拉框选择事件
            form.on('select(safeAffectIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['riskAssessmentTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'safe_affect_id';

                // 发送更新请求
                fetch('/updateRiskAssessmentEcu', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 经济影响下拉框选择事件
            form.on('select(economyAffectIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['riskAssessmentTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'economy_affect_id';

                // 发送更新请求
                fetch('/updateRiskAssessmentEcu', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 操作影响下拉框选择事件
            form.on('select(operatorAffectIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['riskAssessmentTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'operator_affect_id';

                // 发送更新请求
                fetch('/updateRiskAssessmentEcu', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 隐私影响下拉框选择事件
            form.on('select(privateAffectIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['riskAssessmentTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'private_affect_id';

                // 发送更新请求
                fetch('/updateRiskAssessmentEcu', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });
        });
    </script>
</body>
</html>